﻿@namespace BlazorDemos.Shared

@inject IJSRuntime JsRuntime;

<div class="sf-dropdown-container">
    <div class="sf-dropdown-input-container" @onclick="@OnInputClick">
        <input @ref="inputElement" @bind="Value" class="sf-dropdown-input" readonly="readonly" @onblur="@OnInputBlur" />
        <span class="sb-icons sf-dropdown-icon" @onclick="@OnIconClick"></span>
    </div>
    <div class="@popupClass">
        <ul class="@SampleUtils.LIST_UL_CLASS">
            @foreach (var item in DataSource)
            {
                var liClass = SampleUtils.LIST_LI_CLASS;
                if (item.Text == Value)
                {
                    liClass = SampleUtils.AddClass(liClass, SampleUtils.ACTIVE_CLASS);
                }
                <li class="@liClass" @onclick="@(async () => { await OnItemSelect(item); })">
                    @if (ItemTemplate != null)
                    {
                        @ItemTemplate(item);
                    }
                    else
                    {
                        <span>@item.Text</span>
                    }
                </li>
            }
        </ul>
    </div>
</div>

@code {
    private string popupClass { get; set; }
    private ElementReference inputElement { get; set; }

    /// <summary>
    /// ChildContent of DropDownComponent.
    /// </summary>
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    /// <summary>
    /// Specifies the DataSource of DropDown component.
    /// </summary>
    [Parameter]
    public List<DropDownData> DataSource { get; set; }

    /// <summary>
    /// Specifies the value to be set in the input element.
    /// </summary>
    [Parameter]
    public string Value { get; set; }

    /// <summary>
    /// Specifies the static default value to the input element.
    /// </summary>
    [Parameter]
    public string DefaultValue { get; set; }

    /// <summary>
    /// Specifies the custom item template to be render in the list element.
    /// </summary>
    [Parameter]
    public RenderFragment<DropDownData> ItemTemplate { get; set; }

    /// <summary>
    /// Triggers the event on item selection.
    /// </summary>
    [Parameter]
    public EventCallback<DropDownData> OnSelect { get; set; }

    // Input container click event handler.
    private void OnInputClick()
    {
        popupClass = SampleUtils.RemoveClass(popupClass, SampleUtils.DISPLAY_NONE);
    }

    // Icon click event handler.
    private async Task OnIconClick()
    {
        await JsRuntime.InvokeVoidAsync("sfBlazorSB.inputFocus", inputElement);
    }

    // Input blur event handler.
    private async Task OnInputBlur()
    {
        // Await the popup hide process for dropdown selection.
        await Task.Delay(200);
        popupClass = SampleUtils.AddClass(popupClass, SampleUtils.DISPLAY_NONE);
    }

    // Item selection event handler.
    private async Task OnItemSelect(DropDownData args)
    {
        if (OnSelect.HasDelegate)
        {
            await OnSelect.InvokeAsync(args);
        }
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        if (Value == null && DataSource.Any())
        {
            Value = DataSource.First().Text;
        }
        popupClass = SampleUtils.DROPDOWN_POPUP + SampleUtils.SPACE + SampleUtils.DISPLAY_NONE;
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        if (DefaultValue != null)
        {
            Value = DefaultValue;
        }
    }
}
